<template>
  <div style="padding-top: 80px;text-align: left;" >
    <div class="main-content" style="height: 597px;overflow-y: auto;">
    <div class="header">
      <dl class="header_text">
        <dt>基本信息栏</dt>
        <dd><span>英文名：</span><em>{{ science.enName }}</em></dd>
        <dd><span>性　格：</span><em>{{ science.characters }}</em></dd>
        <dd><span>祖　籍：</span><em>{{ science.home }}</em></dd>
        <dd><span>易患病：</span><em>{{ science.sick }}</em></dd>
        <dd><span>寿　命：</span><em>{{ science.age }}</em></dd>
        <dd><span>价　格：</span><em>{{ science.price }}</em></dd>
      </dl>
      <div style="text-align: center;margin-left: 300px;" class="header_img" >
        <img
            :alt="science.name"
            :src="science.img" />
        <span >封面</span>
      </div>
    </div>
    <div>
        <div v-html="science.content"></div>
    </div>
    </div>
  </div>
</template>
<script>
//请求
import request from "@/utils/request";

export default {
  name: "ScienceDetail",
  components: {},
  data() {
    return {
      science:{},
    };
  },
  mounted() {},
  created() {
    this.load();
  },
  watch: {
    
  },
  methods: {
    //查询狗狗信息
    load() {
      let url =
        "/science/getById?id=" +this.$route.query.id;
      request.get(url).then((res) => {
        this.science = res.data;
      });
      
    },
  },
};
</script>


<style scoped>
.header {
  background: #efefef;
  border-bottom: 1px solid #ddd;
  padding: 20px 30px;
  position: relative;
}
.header_text {
  width: 830px;
  display: inline-block;
}
.header_text dt {
  font: 24px / 24px "Microsoft YaHei";
  padding-bottom: 20px;
}
.header_text dd {
  float: left;
  width: 410px;
  margin: 30px 0 0;
  font: 16px / 20px "Microsoft YaHei";
  padding: 0 5px 0 0;
}
.header_img {
  display: inline-block;
  vertical-align: top;
}
.header_img img {
  display: block;
  width: 258px;
  height: 188px;
  padding: 20px;
  border: 1px solid #ddd;
  background:  #fff;
}
</style>
